<template>
    <view>
        查询节点信息
        <custom-tabs></custom-tabs>
        <button id="btn1">按钮1</button>
        <button class="box">按钮2</button>
        <button class="box">按钮3</button>
        <!-- 写法一 -->
        <comA></comA>
        <!-- 写法二 -->
        <com-a id="coma"></com-a>
        <!-- 引用自定义组件(默认配置) 不需要使用import引入-->
        <com-b></com-b>
        <custorm-from></custorm-from>
        <view class="long"></view>
    </view>
</template>
<script setup>
    import { getCurrentInstance, onMounted } from 'vue'
    import comA from '@/coms/com-a.vue'
    const instance = getCurrentInstance()
    onMounted(() => {
        // 1 创建一个节点查询器
        // in 传递当前页面的实例
        const selectorQuery = uni.createSelectorQuery().in(instance.proxy)
        // exec 执行
        // in 查询自定义组件的大小 、位置
        // select 查询一个节点
        // selectAll 查询一堆节点、
        // selectViewport 查询页面

        // 2 select 查询一个节点
        selectorQuery.select('#btn1').boundingClientRect((res) => {
            console.log(res)
        })
        // 3 查询一堆节点
        selectorQuery.selectAll('.box').boundingClientRect((resArr) => {
            console.log(resArr)
        })
        // 4 查询页面信息
        selectorQuery.selectViewport().boundingClientRect((res) => {
            console.log(res)
        })
        // 5 查询页面滚动的位置大小信息
        selectorQuery.selectViewport().scrollOffset((res) => {
            console.log(res)
        })
        // 6  查询自定义组件
        selectorQuery.select('#coma').boundingClientRect((res) => {
            console.log(res)
        })
        // 定时器 5秒查询
        setTimeout(() => {
            // 执行查询
            selectorQuery.exec()
        }, 5000)
    })
</script>
<style lang="scss">
    .long {
        height: 300vh;
        background-image: linear-gradient(black, red);
    }
</style>
